<!--用法用量预设-->
<template>
  <Popup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="550"
    :height="595"
    @isReady="initPopup"
    title="用法用量预设"
    @hidden="hidden"
    :toolbarItems="popupToolbarItems"
  >
    <DxForm label-location="left" :col-count="1" :form-data="dosage">
      <DxGroupItem>
        <DxSimpleItem data-field="">
          <div class="custom-form-item">
            <p>药品品种：</p>
            <div>
              <DxTextBox
                stylingMode="outlined"
                :disabled="true"
                :value="drugDetail.name"
              />
              <div class="notice">
                <el-tag type="error" :closable="false" class="word1">
                  剂型：{{ drugDetail.dosageName }}
                </el-tag>
                <el-tag type="warning" :closable="false" class="word1">
                  毒理分类：{{ drugDetail.toxicologyType }}</el-tag
                >
                <el-tag type="success" :closable="false" class="word1">
                  单位：{{ drugDetail.dosageUnitName }}
                </el-tag>
              </div>
            </div>
          </div>
        </DxSimpleItem>
        <DxSimpleItem data-field="">
          <div class="pishi">
            <DxCheckBox
              :width="100"
              text="过敏皮试"
              :value="!!drugDetail.skinTestSort"
              v-bind="{ disabled: true }"
            />
            <DxTextBox
              style="flex: 1"
              v-bind="{ stylingMode: 'outlined', disabled: true }"
              :value="drugDetail.skinTestSort"
            />
          </div>
        </DxSimpleItem>
      </DxGroupItem>

      <DxGroupItem>
        <div class="center-title">
          <div style="font-size: 16px; width: 200px">常规用法及用量:</div>
          <el-tag type="warning" :closable="false">
            设置预设后，处方选中药品时，将读入预设值</el-tag
          >
        </div>
      </DxGroupItem>
      <DxGroupItem>
        <DxSimpleItem>
          <div class="pishi">
            <DxCheckBox :width="100" text="使用方法" :value="true" />
            <DxSelectBox
              style="flex: 1"
              v-bind="instructionsOptions"
              v-model:value="dosage.instructions"
            />
          </div>
        </DxSimpleItem>
        <DxSimpleItem>
          <div class="pishi">
            <DxCheckBox :width="100" text="使用频次" :value="true" />
            <DxSelectBox
              style="flex: 1"
              v-bind="frequencyUseOptions"
              v-model:value="dosage.frequencyUse"
            />
          </div>
        </DxSimpleItem>
        <DxSimpleItem>
          <div class="pishi">
            <DxCheckBox :width="100" text="成人剂量" :value="true" />
            <DxTextBox
              style="flex: 1"
              v-bind="editOptions"
              v-model:value="dosage.adultDose"
            />
          </div>
        </DxSimpleItem>
        <DxSimpleItem>
          <div class="pishi">
            <DxCheckBox :width="100" text="小儿剂量" :value="true" />
            <DxTextBox
              style="flex: 1"
              v-bind="editOptions"
              placeholder="缺省时，系统自动按照年龄折算法折算"
              v-model:value="dosage.childDose"
            />
          </div>
        </DxSimpleItem>
      </DxGroupItem>
      <DxGroupItem :col-count="2">
        <DxSimpleItem data-field="">
          <div class="pishi">
            <DxCheckBox :width="100" text="处方最大剂量" :value="true" />
            <DxTextBox
              style="flex: 1"
              v-bind="editOptions"
              v-model:value="dosage.prescriptionMaxDose"
            />
          </div>
        </DxSimpleItem>
        <DxSimpleItem data-field="">
          <div class="pishi">
            <DxCheckBox :width="100" text="最大疗程" :value="true" />
            <DxTextBox
              style="flex: 1"
              v-bind="getSimpleSuffix('天')"
              v-model:value="dosage.maxCourseTreatment"
            />
          </div>
        </DxSimpleItem>
      </DxGroupItem>
    </DxForm>
    <div class="lb-form-button-right">
      <DxButton
        text="取消"
        styling-mode="text"
        type="default"
        @click="hidden()"
      />
      <DxButton
        text="保存并应用于当前分类"
        styling-mode="text"
        type="default"
        @click="saveToCatalog()"
      />
      <DxButton
        text="保存并退出"
        @click="save()"
        styling-mode="text"
        type="default"
      />
    </div>
  </Popup>
</template>

<script lang="ts">
import { DxPopup } from "devextreme-vue/popup";
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxRequiredRule,
  DxLabel,
} from "devextreme-vue/form";
import DxTagBox from "devextreme-vue/tag-box";
import DxCheckBox from "devextreme-vue/check-box";
import { ElButton, ElIcon, ElTag } from "element-plus";
import {
  Vue,
  Options,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import { DxColumn, DxDataGrid, DxEditing } from "devextreme-vue/data-grid";
import DataSource from "devextreme/data/data_source";
import DxButton from "devextreme-vue/button";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import { DxSelectBox } from "devextreme-vue/select-box";
import { DxTextBox } from "devextreme-vue/text-box";
import Popup from "@/framework/components/popup/popup.vue";
import { dxPopupToolbarItem } from "devextreme/ui/popup";
import { dxButtonOptions } from "devextreme/ui/button";
import DrugData from "@/data-source/drug";
import { ApiTool } from "@/api/api-tool";
import {
  DictionaryItem,
  DictionaryItemModel,
  DrugClient,
  InOutputUsageDrugModel,
  OutPutDrugInfo,
} from "@/api/api_drugclient";
import { Tool } from "@/utils/tool";
@Options({
  components: {
    Popup,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxRequiredRule,
    DxLabel,
    DxTagBox,
    DxCheckBox,
    ElButton,
    DxColumn,
    DxDataGrid,
    DxEditing,
    DxButton,
    ElIcon,
    ElTag,
    DxSelectBox,
    DxTextBox,
  },
})
export default class CreateDrugDosage extends Vue {
  // 药品类型
  @Prop()
  drugType: number;

  // 父目录id
  @Prop()
  parentId: string;

  // 方案id
  @Prop()
  drugSchemeId: string;

  // 药品分类id
  @Prop()
  drugSortId: string;

  // 药品分类id
  @Prop({ required: true })
  drugId: string;

  @Prop({ type: Boolean, default: false })
  value!: boolean;

  @Emit("success")
  addSuccess(e?) {}

  popupToolbarItems: dxPopupToolbarItem[] = [
    {
      location: "after",
      widget: "dxButton",
      options: {
        text: "全部用法用量预设",
        stylingMode: "text",
        type: "default",
        onClick() {
          // self.$router.push("/")
        },
      } as dxButtonOptions,
    },
  ];

  editOptions = {
    stylingMode: "outlined",
    placeholder: "请输入",
  };
  getSimpleSuffix(
    text: string,
    extendOptions: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    let options: dxSelectBoxOptions = {
      stylingMode: "outlined",
      buttons: [
        {
          name: "unit",
          location: "after",
          options: {
            text,
            stylingMode: "text",
            tabIndex: -1,
          },
        },
      ],
    };

    return Object.assign({}, extendOptions, options);
  }
  getSelectBoxOptions(extendOptions: dxSelectBoxOptions) {}

  popupVisible = this.value || false;

  @Inject()
  apiTool: ApiTool;

  created() {
    let client = this.apiTool.createClient(DrugClient);
    this.drugData = new DrugData(client, this);
  }
  // 初始化弹窗
  initPopup() {
    this.dosage = {};
    this.dictionaryList = {};
    this.getDrugDetail();
    this.getDosage();
  }

  // 药品详情
  drugData: DrugData;
  drugDetail: OutPutDrugInfo = {};
  async getDrugDetail() {
    this.drugDetail = await this.drugData.info(this.drugId, this.drugSchemeId);
  }

  // 设置选择器
  setTagSetting(
    items: DictionaryItem[],
    addedOptions: dxSelectBoxOptions = {}
  ) {
    let defaultSetting = {
      stylingMode: "outlined",
      displayExpr: "displayValue",
      valueExpr: "dictionaryId",
      searchEnabled: true,
      searchExpr: "value",
      showDropDownButton: true,
    } as dxSelectBoxOptions;
    return Object.assign(defaultSetting, { items }, addedOptions);
  }

  // 用法信息
  dosage: InOutputUsageDrugModel = {};
  // 字典信息
  dictionaryList: DictionaryItemModel = {};
  async getDosage() {
    let dosage = await this.drugData.getDosage(this.drugId);
    this.dictionaryList = dosage.dictionaryList || {};
    dosage.dictionaryList = undefined;
    this.dosage = dosage;
  }
  // 使用方法
  get instructionsOptions() {
    return this.setTagSetting(
      this.dictionaryList.drugUsageDrugInstructions || []
    );
  }
  // 使用频次
  get frequencyUseOptions() {
    return this.setTagSetting(
      this.dictionaryList.drugUsageDrugFrequencyUse || []
    );
  }

  @Watch("value")
  watchValue() {
    this.popupVisible = this.value;
  }
  // 关闭
  hidden() {
    this.popupVisible = false;
    this.$emit("update:value", this.popupVisible);
  }
  // 保存
  save(dosage = this.dosage) {
    let params = Object.assign(dosage, { drugId: this.drugId });
    this.drugData.addDosage(params).then(() => {
      this.addSuccess();
      this.hidden();
    });
  }
  // 应用于当前分类
  saveToCatalog() {
    this.save({
      ...this.dosage,
      isApplicationForDrugSort: true,
    } as InOutputUsageDrugModel);
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 56px;
  padding: 15px;
  .title-content {
    display: flex;
    justify-content: space-between;

    .title-operation {
      display: flex;
      justify-content: space-between;
    }
  }
}

.pishi {
  display: flex;
  // justify-content: start;
  align-items: center;
}
.center-title {
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lb-form-button-right {
  .div1 {
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

</style>
